<template>
  <div>
    <a href="#top" id="scrollToTop" title="Scroll to top">Scroll to Top</a>
    <el-card>
      <!--选择开始-->
      <div>
        <el-row :gutter="8" style="cursor: pointer">
          <el-col :span="3">
            <p>省份:
              <el-button size="mini" type="info" style="font-size: 15px" @click="getHospital('','')">全部</el-button>
            </p>
          </el-col>
          <el-col :span="2" v-for="item in bigCity">
            <div :item="item">
              <p  @click="getSmallCity(item.id,item)" style="margin:20px 0 0 0;padding:0;" class="hover-effect">{{ item.name }}</p>
            </div>
          </el-col>
        </el-row>
      </div>


      <div>
        <el-row :gutter="8" style="cursor: pointer">
          <el-col :span="3">
            <p>城市:
              <el-button size="mini" type="info" style="font-size: 15px" @click="getHospital('','')">全部</el-button>
            </p>
          </el-col>
          <el-col :span="2" v-for="item in smallCity">
            <div :item="item">
                <p @click="getHospital(item.id,item)" style="margin:20px 0 0 0;padding:0;" class="hover-effect">{{ item.name }}</p>
            </div>
          </el-col>
        </el-row>
      </div>


      <div>
        <el-row :gutter="8" style="cursor: pointer">
          <el-col :span="3">
            <p>等级:
              <el-button size="mini" type="info" style="font-size: 15px" @click="lgetHospital('','')">全部</el-button>
            </p>
          </el-col>
          <el-col :span="2" v-for="item in levelArr">
            <div :item="item">
                <p @click="lgetHospital(item.id,item)" style="margin:20px 0 0 0;padding:0;"  class="hover-effect">{{ item.name }}</p>
            </div>
          </el-col>
        </el-row>
      </div>


      <div>
        <el-row :gutter="8" style="cursor: pointer">
          <el-col :span="3">
            <p>类型:
              <el-button size="mini" type="info" style="font-size: 15px" @click="tgetHospital('','')">全部</el-button>
            </p>
          </el-col>
          <el-col :span="2" v-for="item in typeArr">
            <div :item="item">
              <p @click="tgetHospital(item.id,item)" style="margin:20px 0 0 0;padding:0;" class="hover-effect">{{ item.name }}</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!--选择结束-->
      <!--            输入框开始-->
      <el-row :gutter="10">
        <el-col :span="18">
          <el-input placeholder="请输入关键词">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!--            输入框结束-->
      <el-divider></el-divider>       <!--分割线-->
      <div>
        <br>
        <el-row>
          <el-col :span="5">
            <span>城市： </span><h3>{{region}}</h3>
          </el-col>
          <el-col :span="5">
            <span>等级：</span><h3>{{level}}</h3>
          </el-col>
          <el-col :span="5">
            <span>类型：</span><h3>{{type}}</h3>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>       <!--分割线-->
      <!--            医院模块开始-->
      <el-card>
        <el-row :gutter="20" style="height: 130px" v-for="item in hospitalArr">
          <el-col :span="3">
            <img :src="item.imgUrl" width="100%" height="80"></el-col>
          <el-col :span="21">
            <a @click="" href="#" style="display: inline-block; text-decoration: none">
              <h3>{{ item.name }}</h3>
              <p>{{ item.introduce }}</p>
              <p>{{ item.location }}</p>
              <el-divider></el-divider>
            </a>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
    <!--            医院模块结束-->
  </div>
</template>
<script>
import axios from "axios";
import TokenAxios from "@/http/TokenAxios";
import BaseUrl from "@/http/BaseUrl";

export default {
  data() {
    return {
      level:'',
      type:'',
      region:'',
      typeArr: [],
      levelArr: [],
      bigCity: [],
      smallCity: [],
      hospitalArr: [],
      hospitalParam: {
        region: "",
        type: "",
        level: "",
      },
    }
  },
  methods: {
    getSmallCity(id,region) {
      this.region = region.name;
      this.getHospital(id,region)
      TokenAxios.get(BaseUrl.HOSPITAL+"/hospital/small-city/" + id).then((res) => {
        if (res.data.state == 20000) {
          this.smallCity = res.data.data;
          console.log(res.data.data)
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    getHospital(a,region) {
      this.region = region.name;
      this.hospitalParam.region = a
      TokenAxios.post(BaseUrl.HOSPITAL+"/hospital/list", this.hospitalParam).then((res) => {
        if (res.data.state == 20000) {
          this.hospitalArr = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    lgetHospital(a,level) {
      this.level = level.name;
      console.log(1)
      this.hospitalParam.level = a
      TokenAxios.post(BaseUrl.HOSPITAL+"/hospital/list", this.hospitalParam).then((res) => {
        if (res.data.state == 20000) {
          this.hospitalArr = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    tgetHospital(a,type) {
      this.type = type.name;
      console.log(1)
      this.hospitalParam.type = a
      TokenAxios.post(BaseUrl.HOSPITAL+"/hospital/list", this.hospitalParam).then((res) => {
        if (res.data.state == 20000) {
          this.hospitalArr = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    loadP() {
      TokenAxios.get(BaseUrl.HOSPITAL+"/hospital/big-citys").then((res) => {
        if (res.data.state == 20000) {
          this.bigCity = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    loadT() {
      TokenAxios.get(BaseUrl.HOSPITAL+"/hospital/types").then((res) => {
        if (res.data.state == 20000) {
          this.typeArr = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    loadL() {
      TokenAxios.get(BaseUrl.HOSPITAL+"/hospital/levels").then((res) => {
        if (res.data.state == 20000) {
          this.levelArr = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    }
  },
  mounted() {
    this.loadP()
    this.loadT()
    this.loadL()
    TokenAxios.post(BaseUrl.HOSPITAL+"/hospital/list", this.hospitalParam).then((res) => {
      if (res.data.state == 20000) {
        console.log(res.data.data)
        this.hospitalArr = res.data.data;
      } else {
        this.$message.error(res.data.message);
      }
    })
  }
}
</script>
<style>
.hover-effect:hover {
  background-color: #917ab6;
  cursor: pointer;
}
body {
  height: 2000px; /* Add a height to demonstrate scrolling */
  margin: 0;
  font-family: Arial, sans-serif;
}

#scrollToTop {
  display: none; /* Hide the button by default */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  font-size: 16px;
  cursor: pointer;
  padding: 10px 20px;
  border: none;
  background-color: #007BFF;
  color: white;
  border-radius: 5px;
}

#scrollToTop:hover {
  background-color: #0056b3;
}

/* Show the button when the user scrolls down */
body:hover #scrollToTop {
  display: block;
}

/* Add smooth transition */
#scrollToTop {
  transition: opacity 0.3s, visibility 0.3s;
}
</style>
